<template>
	<view>
		<view class="flex-col page_a">
			<u-navbar title="创建计划" title-color="#333" :background="background"></u-navbar>
		  <view class="flex-col justify-start items-start group_a mt-37-5">
		    <view class="section_a mbt-20">
		      <view class="flex-col items-start mbt-20">
		        <text class="font_a text_2_a">您的行业</text>
		      </view>
		      <view @click="openSelectWork" class="flex-row justify-between items-center text-wrapper_a">
		        <text class="font_2_a text_3_a">{{work != '' ? work : '请选择您的行业'}}</text>
		        <image class="image_5_a" src="/static/image/haoduogeni/arrow-right.png" />
		      </view>
		    </view>
		    <view class="section_a mbt-20">
		      <view class="flex-col items-start mbt-20">
		        <text class="font_a text_2_a">提示词</text>
		        
		      </view>
		      <view class="flex-row justify-between items-center text-wrapper_a">
		        <textarea class="font_2_a text_3_a" placeholder="请输入提示词" v-model="tips"/>
		        
		      </view>
		    </view>
		
		    <view class="section_a mbt-20">
		      <view class="flex-col items-start mbt-20">
		        <text class="font_a text_2_a">发布条数</text>
		      </view>
		      <view class="flex-row justify-between items-center text-wrapper_a">
		        <!-- <text class="font_2 text_3">请输入发布的条数</text> -->
		        <input class="font_2_a text_3_a" type="number" placeholder="请输入发布的条数" v-model="times"/>
		      </view>
		    </view>
		    <view class="section_a mt-15">
		      <view class="flex-row">
		        <image @click="changeImgCreate" v-if="!isImgCreate" class="image_6_a" src="/static/image/haoduogeni/uncheck-icon.png" />
		        <image @click="changeImgCreate" v-if="isImgCreate" class="image_6_a" src="/static/image/haoduogeni/pay-type-checked.png" mode=""/>
		        <text class="font_a ml-9-5">图片生成</text>
		      </view>
		      <view class="flex-row items-center">
		        <view class="flex-row items-center group_5_a mt-4-5">
		          <text class="font_3_a text_5_a">每条朋友圈生成</text>
		          <view class="flex-col justify-start items-center shrink-0 text-wrapper_2_a ml-7-5">
		            <!-- <text class="font_4 text_6">6</text> -->
		            <input class="font_2_a text_6_a" style="text-align: center;" type="number" v-model="pics"/>
		          </view>
		        </view>
		        <view class="flex-row items-center ml-9 mt-4-5">
		          <text class="font_3_a text_7_a">张图片，</text>
		          
		          <text class="font_5_a text_8_a">消耗</text>
		          <text class="font_4_a text_9_a">{{pics != '' ? (pics*point) : 0}}</text>
		          <text class="font_5_a text_10_a">积分</text>
		        </view>
		      </view>
		    </view>
		  </view>
		  <view class="page-bottom_a">
		    <view @click="create" class="flex-col justify-start items-center text-wrapper_3_a mt-183-5">
		          <text class="font_2_a text_11_a">生成</text>
		        </view>
		  </view>
		</view>
		
		<selectWork ref="selectwork" @confirm="confirm"></selectWork>

	</view>
</template>

<script>
	import selectWork from "../components/selectWork/index.vue";
	import {
		xiaohaoJifen,
		  getImg
	} from '../../haoduogeni/common/api/user';
	export default {
		components: {
			selectWork
		},
		data() {
			return {
				background: {
					backgroundColor: 'rgba(0,0,0,0)'
				},
				selectWorkShow: false,
				    work: '',//行业
				    tips: '',//提示词
				    point: 0,//积分
				    times: '',//条数
				    pics: '',//每条朋友圈生成图片数
				    uid: '',
				    isImgCreate: false,//图片生成
				    isLoadding: false
			}
		},
		 onLoad(options) {
		    this.getJifen();
		    this.uid = options.uid;
		  },
		methods: {
			changeImgCreate(){
			    this.isImgCreate = !this.isImgCreate;
			    if(!this.isImgCreate){
			      this.pics = '';
			    }
			  },
			  getJifen(){
			    var _this = this;
			    xiaohaoJifen({
			      pt_id: this.$ptId,
			    }).then(res => {
			      //成功时回调函数
			      console.log(res, '获取生成图片消耗积分')
			      if (res.errno == 0) {
			        const data = res.data.point; // 假设返回的是数组格式数据
			        this.point = data;
			
			      }
			    }).catch(err => {
			      //失败时回调函数
			      console.log(err)
			    })
			    
			  },
			  create(){
			    if(this.work == ''){
			      uni.showToast({
			        title: '行业不能为空',
			        icon: 'none'
			      })
			      return
			    }
			    if(this.tips == ''){
			      uni.showToast({
			        title: '提示词不能为空',
			        icon: 'none'
			      })
			      return
			    }
			    if(this.times == ''){
			      uni.showToast({
			        title: '发布条数不能为空',
			        icon: 'none'
			      })
			      return
			    }
			    if(this.times < 1){
			      uni.showToast({
			        title: '发布条数必须大于1条',
			        icon: 'none'
			      })
			      return
			    }
			    if(this.pics == '' && this.isImgCreate){
			      uni.showToast({
			        title: '生成图片不能为空',
			        icon: 'none'
			      })
			      return
			    }
			    if(this.pics > 9 && this.isImgCreate){
			      uni.showToast({
			        title: '生成图片不能超过9张',
			        icon: 'none'
			      })
			      return
			    }
			    if(this.pics < 1 && this.isImgCreate){
			      uni.showToast({
			        title: '生成图片不能小于1张',
			        icon: 'none'
			      })
			      return
			    }
			    if(this.isLoadding){
			      uni.showToast({
			        title: '请勿重复点击',
			        icon: 'none'
			      })
			      return
			    }
			    this.isLoadding = true;
			    uni.showLoading({
			      title: '加载中'
			    })
			    var _this = this;
			    getImg({
			      content: this.tips,
			      img_num: this.isImgCreate ? this.pics : 0,
			      pt_id: this.$ptId,
			      uid: uni.getStorageSync('userId'),
			      wenan_num: this.times,
			      hangye: this.work
			    }).then(res => {
			      //成功时回调函数
			      console.log(res, '获取生成图片消耗积分')
			      if (res.errno == 0) {
			        var code = res.data;
			        this.isLoadding = false;
			        uni.hideLoading();
			        uni.redirectTo({
			          url: '/haoduogeni/createPlaning/index?code=' + code + '&uid=' + this.uid
			        })
			      }else {
			        this.isLoadding = false;
			        uni.hideLoading();
			        uni.showToast({
			          title: res.msg,
			          icon: 'none'
			        })
			      }
			    }).catch(err => {
			      //失败时回调函数
			      console.log(err)
			      this.isLoadding = false;
			      uni.hideLoading();
			    })
			  },
			  
			  // changeTips(e){
			  //   console.log(e.detail.value,'e.detail.value')
			  //   this.tips = e.detail.value;
			  // },
			  // changeTimes(e){
			  //   console.log(e.detail.value,'e.detail.value')
			  //   this.times = e.detail.value;
			  // },
			  // changePics(e){
			  //   console.log(e.detail.value,'e.detail.value')
			  //   this.pics = e.detail.value;
			  // },
			  openSelectWork(){
			    console.log('11111')
			    this.$refs.selectwork.open();
			  },
			  confirm(data){
			    console.log(data,'confirm1111')
			    this.work = data.label;
			  },
		}
	}
</script>

<style lang="less" scoped>
	@import url("../common/css/common.css");
	.mt-37-5 {
	  margin-top: 75rpx;
	}
	.mt-25 {
	  margin-top: 50rpx;
	}
	.mt-15 {
	  margin-top: 30rpx;
	}
	.mt-25-5 {
	  margin-top: 51rpx;
	}
	.ml-9-5 {
	  margin-left: 19rpx;
	}
	.mt-4-5 {
	  margin-top: 9rpx;
	}
	.ml-7-5 {
	  margin-left: 15rpx;
	}
	.ml-9 {
	  margin-left: 18rpx;
	}
	.mt-183-5 {
	  margin-top: 367rpx;
	}
	.mbt-20 {
	  margin-bottom: 40rpx;
	}
	
	.page_a {
	  padding-bottom: 199rpx;
	  background-color: #f7f7f7;
	  overflow-y: auto;
	  overflow-x: hidden;
	  height: 100%;
	  background-image: url('https://jianji.axu9.com/friendCircleImg/ai-create-bg.png');
	  background-size: 100% 449rpx;
	  background-repeat: no-repeat;
	  width: 100%;
	}
	.group_a {
	  /* padding-bottom: 118rpx; */
	  padding: 0 36rpx;
	}
	.section_a {
	  width: 100%;
	 
	}
	.image_4_a {
	  width: 20rpx;
	  height: 35rpx;
	}
	.font_a {
	  font-size: 32rpx;
	  font-family: PingFang SC;
	  line-height: 31rpx;
	  font-weight: 500;
	  color: #000000;
	}
	.text_2_a {
	  margin-left: 4rpx;
	}
	.image_a {
	  width: 355rpx;
	  height: 119rpx;
	}
	.pos_a {
	  position: absolute;
	  right: 33rpx;
	  top: 0;
	}
	.image_2_a {
	  width: 354rpx;
	  height: 448rpx;
	}
	.pos_2_a {
	  position: absolute;
	  right: 0;
	  top: 0;
	}
	.pos_5_a {
	  position: absolute;
	  left: 30rpx;
	  right: 30rpx;
	  top: 287rpx;
	}
	.section_2_a {
	  padding: 36rpx 0;
	  background-color: #ffffff;
	  border-radius: 16rpx;
	}
	.font_2_a {
	  font-size: 30rpx;
	  font-family: PingFang SC;
	  line-height: 28rpx;
	  color: #aeaeae;
	}
	.text_3_a {
	  margin-left: 31rpx;
	}
	.image_5_a {
	  width: 14rpx;
	  height: 24rpx;
	  margin-right: 20rpx;
	}
	.pos_6_a {
	  position: absolute;
	  right: 29rpx;
	  bottom: 17rpx;
	}
	.image_3_a {
	  width: 655rpx;
	  height: 24rpx;
	}
	.pos_3_a {
	  position: absolute;
	  right: 30rpx;
	  top: 30rpx;
	}
	.text_a {
	  color: #000000;
	  font-size: 36rpx;
	  font-family: PingFang SC;
	  font-weight: 500;
	  line-height: 34rpx;
	}
	.pos_4_a {
	  position: absolute;
	  left: 50%;
	  top: 117rpx;
	  transform: translateX(-50%);
	}
	.group_2_a {
	  padding: 0 30rpx;
	}
	.text-wrapper_a {
	  padding: 35rpx 0;
	  background-color: #ffffff;
	  border-radius: 16rpx;
	}
	.text_4_a {
	  margin-left: 31rpx;
	}
	.view_a {
	  margin: 0 30rpx;
	}
	.group_3_a {
	  padding: 56rpx 30rpx 0;
	}
	.group_4_a {
	  padding-left: 9rpx;
	  padding-right: 5rpx;
	}
	.image_6_a {
	  width: 33rpx;
	  height: 33rpx;
	}
	.group_5_a {
	  padding-left: 47rpx;
	}
	.font_3_a {
	  font-size: 28rpx;
	  font-family: PingFang SC;
	  line-height: 28rpx;
	  color: #000000;
	}
	.text_5_a {
	  line-height: 27rpx;
	}
	.text-wrapper_2_a {
	  padding: 20rpx 0;
	  background-color: #ffffff;
	  border-radius: 8rpx;
	  width: 100rpx;
	  height: 68rpx;
	}
	.font_4_a {
	  font-size: 34rpx;
	  font-family: PingFang SC;
	  line-height: 26rpx;
	}
	.text_6_a {
	  color: #000000;
	}
	.group_6_a {
	  margin-top: 61rpx;
	}
	.text_9_a {
	  /* margin-left: 160rpx; */
	  margin-left: 20rpx;
	  color: #f87500;
	  font-weight: 500;
	}
	.font_5_a {
	  font-size: 28rpx;
	  font-family: PingFang SC;
	  line-height: 26rpx;
	  color: #000000;
	}
	.text_8_a {
	  /* margin-left: -123rpx; */
	}
	.text_7_a {
	  /* margin-left: -168rpx; */
	}
	.text_10_a {
	  /* margin-left: 125rpx; */
	  margin-left: 20rpx;
	}
	.text-wrapper_3_a {
	  padding: 30rpx 0;
	  background-image: linear-gradient(90deg, #00ceb8 0%, #0fcd99 100%);
	  border-radius: 44rpx;
	  width: 90%;
	  margin: 0 auto;
	}
	.text_11_a {
	  color: #ffffff;
	}
	.page-bottom_a {
	  width: 100%;
	  position: fixed;
	  left: 0;
	  bottom: 0;
	  padding-bottom: 100rpx;
	  background-color: #f7f7f7;
	}

</style>
